<script setup lang="ts">
import { FormComponents } from "../FormComponents";
import type { FormDesignerComponents } from "../FormComponentMixin";
import { computed, inject, onMounted, type Ref } from "vue";
import { copyField, delField } from "@/utils/process";

const props = defineProps({
  //组件模式，free设计模式，normal 编辑模式, read 阅读模式，disable 禁用模式
  mode: {
    type: String,
    default: "normal"
  },
  type: {
    type: String,
    default: ""
  },
  //本组件所在的组件列表
  parents: {
    type: Array,
    default: () => {
      return [];
    }
  },
  //本组件所在列表parents的索引位置
  index: {
    type: Number,
    default: 0
  },
  rules: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const _value = defineModel<any>();
const config = defineModel<FormDesignerComponents>("config");
const active = defineModel<FormDesignerComponents>("active");
const tableListRefs = inject<Ref<object>>("tableListRefs");
const componentRefs = inject<Ref<object>>("componentRefs");
const emits = defineEmits(["change"]);

const setTableRef = (el, cp) => {
  if (el) {
    if (!tableListRefs.value[cp.code]) {
      tableListRefs.value[cp.code] = el;
    }
    if (!componentRefs.value[cp.code]) {
      componentRefs.value[cp.code] = el;
    }
  }
};

const setComponetsRef = (el, cp) => {
  if (el) {
    if (!componentRefs.value[cp.code]) {
      componentRefs.value[cp.code] = el;
    }
  }
};

const showActive = computed(() => {
  return active.value?.id === props.config.id && props.mode === "free";
});

const handleItemValueChange = (item, val) => {
  emits("change", item, val);
};

onMounted(() => {
  console.log("form componet value", props.config, _value.value);
});
</script>
<template>
  <div
    style="position: relative; width: 100%"
    :class="{
      'w-form-cp-active': showActive,
      'w-border-no': !config.props.isContainer
    }"
  >
    <div v-show="props.mode === 'free'" class="w-form-component">
      <div>
        <el-icon color="#FFF" @click="copyField(props.parents, props.index)" size="small"
          ><CopyDocument
        /></el-icon>
        <el-icon color="#FFF" @click="delField(props.parents, props.index)" size="small"
          ><Remove
        /></el-icon>
      </div>
    </div>
    <component
      v-if="props.config.props.isFormItem"
      v-model:config="config"
      :is="FormComponents[props.type]"
      :mode="props.mode"
      v-model="_value"
      :rules="props.rules"
      v-model:active="active"
      @change="handleItemValueChange"
    />
    <component
      v-else-if="props.config.props.isSubform && props.config.props.isSubform === true"
      v-model:config="config"
      :is="FormComponents[props.type]"
      :ref="el => setTableRef(el, config)"
      :mode="props.mode"
      v-model="_value[props.config.code]"
      :rules="props.rules"
      v-model:active="active"
    />
    <component
      v-else
      :is="FormComponents[props.type]"
      :ref="el => setComponetsRef(el, config)"
      v-model:config="config"
      :mode="props.mode"
      :rules="props.rules"
      v-model="_value"
      v-model:active="active"
    />
  </div>
</template>

<style scoped lang="scss">
.w-border-no {
  border: none !important;
}

.w-form-component {
  position: absolute;
  width: 60px !important;
  right: 0;
  bottom: 0;
  z-index: 9;
  overflow: hidden;
  border-radius: 5px 5px;

  div {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
  }

  i {
    width: 30px;
    height: 25px !important;
    padding: 5px;
    cursor: pointer;
    background: var(--el-color-primary);
    &:hover {
      background: var(--el-color-primary-light-3);
    }
  }
}
</style>
